<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
        *{
            margin:0;
            padding:0;
        }
      div{
        height:100px;
        width:100px;
        background-color: aqua;
        /* animation-name：动画名称 必须写
        animation-duration：动画时间  必须写
        animation-timing-function：运动效果 
        animation-delay:延迟
        animation-iteration-count: 动画执行的次数  infinite(无限次)、3
        animation-direction:是否反方向播放 默认normal 反方向alternate
        animation-fill-mode：是否回到起始状态 默认是backwards  
                             在原地不回来了forwards
        animation: name duration timing-function delay iteration-count direction fill-mode; */
        
        animation:playa 5s linear 1s 1 alternate forwards;
        /* 开启动画 */
        animation-play-state: running;
      }

      div:hover{
        /* 动画停止 */
        animation-play-state:paused
      }
      @keyframes playa{
         /* 动画开始 0% from*/
         /* 0%{
            transform: translate(0,0);
         } */
         /* 50%{
            transform: translate(300px,300px);
         } */
         /* 动画结束 100% to*/
         100%{
            transform: translate(600px,0px);
         }
      }

      /* keyframes关键帧 */
      @keyframes play{
         /* 动画开始 0% from*/
         0%{
            transform: translateX(0);
         }
         /* 动画结束 100% to*/
         100%{
            transform: translateX(500px);
         }
      }

   </style>
</head>
<body>
   <div></div> 
</body>
</html>